<template>
	<view class="doctorInfo-wrap" v-if="doctorDetail">
		<view class="index-bg" style="height: 266rpx;"></view>
		<view class="doctor-like" @click="likeOrUnlike()">
			<image :src="doctorDetail.focusFlag > 0 ? 'https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_doctor_like.png': 'https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_doctor_unlike.png'"></image>
			<view class="like-text">{{doctorDetail.focusFlag > 0 ? '已': ''}}关注</view>
		</view>
		<image class="doctorInfo-card-img" :src="doctorDetail.picture"></image>
		<view class="doctorInfo-card">
			<view class="doctor-info-to-detail" @click="gotoRouter('/pages-hospital/doctorDescribe/doctorDescribe?id=' + doctorId)">详情</view>
			<view class="doctorInfo-card-top">
				<view class="doctorInfo-card-info">
					<view class="doctorInfo-layer1">
						<view class="doctorInfo-layer1-box">
							<view class="doctorInfo-layer1-word2" style="margin-right: 32rpx;">{{ doctorDetail.doctorName }}</view>
							<uni-rate readonly :value="parseFloat(doctorDetail.goodRate) / 20" />
						</view>
						<view class="doctorInfo-layer1-word4">{{ doctorDetail.departmentName }}&nbsp;|&nbsp;{{doctorDetail.jobGradeName || ''}}</view>
						<view class="doctorInfo-layer1-word3">{{ doctorDetail.hospName }}</view>
					</view>
					<view class="doctorInfo-layer2 nowrap">擅长：{{ doctorDetail.goodsDirection }}</view>
				</view>
			</view>
		</view>
		
		<view class="doctorInfo-inquiry">
			<u-title value="问诊服务"></u-title>
			<view v-if="doctorDetail.signFlag > 0" class="inquiry-type-wrap">
				<view class="already-sign">
					<view class="sign-text">已签约</view>
				</view>
				<view class="inquiry-type-left" style="margin-left: 120rpx;margin-right: 0;">
					<view class="inquiry-type-left-head">
						<view class="inquiry-type-name">视频/图文问诊</view>
						<view class="inquiry-type-price">免费</view>
					</view>
					<view class="inquiry-type-describe">有效期：{{doctorDetail.expireTime}}</view>
				</view>
			</view>
			<view v-if="doctorDetail.imgDiagnoseFlag > 0" class="inquiry-type-wrap">
				<view class="inquiry-type-left">
					<view class="inquiry-type-left-head">
						<view class="inquiry-type-name">图文问诊</view>
						<view v-if="doctorDetail.signFlag > 0" class="inquiry-type-price">免费</view>
						<view v-if="doctorDetail.signFlag == 0" class="inquiry-type-price">¥{{doctorDetail.amount}}/次</view>
					</view>
					<view class="inquiry-type-describe">与名医线上图文沟通交流病情</view>
				</view>
				<view class="inquiry-btn" @click="selectInquiryType(0)">马上问诊</view>
			</view>
			<view v-if="doctorDetail.videoDiagnoseFlag > 0" class="inquiry-type-wrap">
				<view class="inquiry-type-left">
					<view class="inquiry-type-left-head">
						<view class="inquiry-type-name">视频问诊</view>
						<view v-if="doctorDetail.signFlag > 0" class="inquiry-type-price">免费</view>
						<view v-if="doctorDetail.signFlag == 0" class="inquiry-type-price">¥{{doctorDetail.videoAmount}}/次</view>
					</view>
					<view class="inquiry-type-describe">与名医线上图文沟通交流病情，可开药检查</view>
				</view>
				<view class="inquiry-btn" @click="selectInquiryType(1)">马上问诊</view>
			</view>
		</view>
		
		<view v-if="doctorDetail.signFlag == 0 && doctorDetail.signList && doctorDetail.signList.length > 0" class="doctor-info-sign">
			<u-title value="签约服务"></u-title>
			<scroll-view class="sign-list-scroll" scroll-x>
				<view class="sign-list-container">
					<view v-for="(item, index) in doctorDetail.signList" @click="selectSign(index)" :key="index" :class="index == signIndex ? 'sign-item-select': 'sign-item'">
						<view class="sign-item-name">{{item.name}}</view>
						<view class="sign-item-price">{{item.price}}元</view>
						<view class="sign-item-month-price">{{getMonthlyPrice(item)}}元/月</view>
					</view>
				</view>
			</scroll-view>
			<view class="sign-notice">图文问诊、视频问诊有效期内全程免费</view>
			<view class="sign-confirm" @click="confirmSign()">￥{{doctorDetail.signList[signIndex].price}} 开通服务</view>
		</view>

		<view class="doctorInfo-hospital" @click="gotoRouter('/pages-hospital/hospitalInfo/hospitalInfo?hospitalId=' + hospital.id)">
			<u-title value="执业医院"></u-title>

			<view class="doctorInfo-hospital-con">
				<view class="doctorInfo-hospital-left">
					<view class="word3">{{ hospital.hospName }}</view>
					<view class="word5 nowrap">{{ hospital.intro }}</view>
				</view>
				<image class="doctorInfo-hospital-icon" src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_gray_right.png"></image>
			</view>
		</view>

		<view class="doctorInfo-brief">
			<u-title value="医生简介"></u-title>
			<view class="doctorInfo-brief-info">{{ doctorDetail.intro }}</view>
		</view>

		<view class="doctorInfo-evaluate" v-if="commentList.length > 0">
			<u-title :value="'用户评价（' + commentList.length + '）'"></u-title>
			<view class="section7" v-for="(item, index) in commentList" :key="index">
				<image class="comment-headphoto" :src="item.userPicture"></image>
				<view class="box7">
					<view class="box7-txt">{{ item.patientName }}</view>
					<uni-rate readonly :value="item.star" />
				</view>
				<text lines="1" decode="true" class="word11">{{ item.content }}</text>
				<text lines="1" decode="true" class="txt2">{{ item.createdTime }}</text>
			</view>
			<view class="comment-more-wrap" @click="gotoRouter('/pages-member/evaluateList/evaluateList?doctorId=' + doctorId)">
				<view class="comment-more-text">更多</view>
				<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_gray_right.png"></image>
			</view>
		</view>
		
		<view class="doctorInfo-evaluate" v-if="articleList.length > 0">
			<u-title value="医生文章"></u-title>
			<view style="height: 24rpx;"></view>
			<u-article-item v-for="(item, index) in articleList" :key="index" :data="item"></u-article-item>
		</view>
	</view>
</template>

<script>
import uniRate from '@/components/uni/uni-rate/uni-rate.vue';
import uTitle from '@/components/u-title/u-title.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uTitle,
		uniRate
	},
	data() {
		return {
			doctorId: null,
			doctorDetail: null,
			hospital: {},
			commentList: [],
			articleList: [],
			signIndex: 0,
			payFlag: true ,//支付按钮开关
			

		};
	},
	onLoad(option) {
		this.doctorId = option.id ? option.id : null;


		if (option.scene) {
			this.doctorId = decodeURIComponent(option.scene);
		}
		
	
	},

	onShow() {
		this.queryDoctorDetail();
		this.queryCommentList();
		this.queryDoctorArticles();
		
	},
	computed: {
		...mapState({
			questionOrderForm: state => state.questionOrderForm
		})
	},
	methods: {
		...mapMutations({
			setQuestionOrderForm: 'setQuestionOrderForm',
			clearQuestionOrderForm: 'clearQuestionOrderForm'
		}),

		//医生详情
		queryDoctorDetail() {
			this.$api
				.queryDoctorDetail({
					params: {
						id: this.doctorId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.doctorDetail = res.result;
						this.hospital = res.result.hosptail;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},
		//医师的评论列表
		queryCommentList() {
			this.$api
				.queryCommentList({
					params: {
						doctorId: this.doctorId,
						pageNo: 1,
						pageSize: 5
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.commentList = res.result.records;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},
		// 医生的文章列表
		queryDoctorArticles() {
			this.$api.getDoctorArticles({
				params: {
					doctorId: this.doctorId
				}
			}).then(res => {
				if (res.code == 200) {
					this.articleList = res.result;
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				}
			})
		},
		//选择问诊类型并跳转
		selectInquiryType(type) {

			if (this.doctorDetail.onLineStatus > 0) {
				if (this.doctorDetail.signFlag > 0) {
					this.questionOrderForm.price = 0.00;
				} else {
					if (type == 0) {
						this.questionOrderForm.price = this.doctorDetail.amount;
					} else {
						this.questionOrderForm.price = this.doctorDetail.videoAmount;
					}
				}
				this.questionOrderForm.inquiryType = type;
				this.questionOrderForm.type = 0;
				this.questionOrderForm.doctorId = this.doctorId;
				this.setQuestionOrderForm(this.questionOrderForm);
				this.gotoRouter('/pages-inquiry/inquiryDescribe/inquiryDescribe');
			} else {
				uni.showToast({
					icon:'none',
					title: '医生当前不在线，请稍后再试'
				})
			}
			
		},
		// 计算平均每月服务金额
		getMonthlyPrice(item) {
			return (parseFloat(item.price) / item.monthNum).toFixed(2);
		},
		selectSign(index) {
			this.signIndex = index;
		},
		confirmSign() {
			this.$api.signDoctor({
				data: {
					"doctorId": this.doctorDetail.id,
					"signId": this.doctorDetail.signList[this.signIndex].id
				}
			}).then(res => {
				if (res.code == 200) {
					this.submitOrder(res.result)
				} else {
					uni.showToast({
						icon:'none',
						title: res.message
					})
				}
			})
		},
		//发起微信支付
		submitOrder(orderId) {
			if (this.payFlag) {
				this.payFlag = false;
				this.$api
					.payDoctorSign({
						data: {
							id: orderId
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.wxRequestPayment(res.result);
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			}
		},
		
		//微信小程序拉起支付
		wxRequestPayment(res) {
			wx.requestPayment({
				timeStamp: res.timeStamp,
				nonceStr: res.nonceStr,
				package: res.packageValue,
				signType: res.signType,
				paySign: res.paySign,
				success: success => {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					this.queryDoctorDetail();
				},
				fail: error => {
					uni.showToast({
						title: '取消支付',
						icon: 'none'
					});
				},
				complete: () => {
					this.payFlag = true;
				}
			});
		},
		
		likeOrUnlike() {
			this.$api.likeDoctor({
				data: {
					"id": this.doctorDetail.id,
					"focusFlag": 1 - this.doctorDetail.focusFlag
				}
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						icon:'none',
						title:'操作成功'
					});
					this.doctorDetail.focusFlag = 1 - this.doctorDetail.focusFlag;
				} else {
					uni.showToast({
						icon:'none',
						title:res.message
					});
				}
			})
		},

	}
};
</script>

<style lang="less">
@import './doctorInfo.less';

</style>
